<template>
  <div class="container" @click='handleclick'>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for='(item,index) of gallaryImgs' :key='index'>
                <img :src="item"
                class='gallary-img'>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonGallary',
  props:{
      gallaryImgs:Array
  },
  data:function(){
      return  {
          swiperOption:{
                    loop: false,
                    pagination:'.swiper-pagination',
                    paginationType:'fraction',
                    observeParents: true,
                    observer: true
            }
                }
        },
    methods:{
        handleclick:function(){
            this.$emit('close')
        }
    }
}
</script>

<style lang="stylus" scoped>
.container >>> .swiper-container
    overflow: inherit
.container
    display: flex
    flex-direction: column
    justify-content: center
    z-index: 99
    position: fixed
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: #000
    .wrapper
        height: 0
        width: 100%
        padding-bottom: 100%
        .swiper-pagination
            color:white
            bottom:-1rem
        .gallary-img
            width: 100%
</style>